<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel__container img {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <el-container>
          <el-header>
          <el-row>
             <el-col :span="4" style="display: flex; flex-direction: row;align-items: center;"> 
              <img src="./static/images/logo.png" style="height: 60px;"/>
              <h2 style="padding-left: 6px;">技术社区</h2>
             </el-col>
             <el-col :span="8">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                style="border-bottom: none !important;"
              >
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">文章</el-menu-item>
                <el-menu-item index="3">课程</el-menu-item>
                <el-menu-item index="4">商城</el-menu-item>
              </el-menu>
             </el-col>
             <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden-xs-only">
              <el-input />
             </el-col>
             <el-col :span="4" v-if="isLoggendIn" style="text-align: right; height: 60px; line-height: 60px" class="hidden-only-sm;">
              <el-link type="primary"><a href="login.html" style="text-decoration: none; color: black;">登录</a></el-link>
              <el-link type="primary" style="padding-left: 10px"><a href="reg.html" style="text-decoration: none; color: black;">注册</a></el-link>
          </el-col>
          <el-col :span="4" v-else style="text-align: right; height: 60px; line-height: 60px" class="hidden-only-sm;">
              <el-link type="primary"><img src="./static/images/avatar.png" style="height: 60px; border-radius: 50%;"></el-link>
              <el-link type="primary" style="padding-left: 10px"><a href="person.html" style="text-decoration: none; ">个人中心</a></el-link> 
          </el-col>
          </el-row>
          </el-header>
          <el-container>
            <el-main>
                <el-row>
                    <el-col :xs="12" :sm="8" v-for="(product,i) in productList" :key="i">
                        <img :src="product.img" style="width: 60%;"/>
                        <p>{{product.name}}</p>
                        <p>价格:  {{product.price}}  库存： {{product.stock}}</p>
                        <el-button @click="addToCart(product)">加入购物车</el-button>
                    </el-col>
                </el-row>
          </el-main>
          <el-aside>
            <el-card>
                <h2>购物车</h2>
                <div v-if="cartItems.length>0">
                    <div v-for="(item,i) in cartItems" :key="i">
                        <img :src="item.product.img" style="width: 30%;"/>
                        <p>商品名称：{{item.product.name}}</p>
                        <p>价格: {{item.product.price}} × {{item.quantity}} = {{item.product.price * item.quantity}}</p>
                        <el-input-number v-model="item.quantity" :min="1" @change="updateQuantity(item)"></el-input-number>
                        <el-button size="small" @click="removeItem(item)">删除</el-button>
                        <el-divider style="margin: 10px 0;"/>
                    </div>
                    <p>总价: {{totalPrice}}</p>
                    
                </div>
                <div v-else>
                    <el-empty description="暂无商品"></el-empty>
                </div>
            </el-card>
          </el-aside>
          </el-container>
          <el-footer>
            <el-row>
              <el-col :xs="24" :lg="8" style="display: flex; flex-direction: row; align-items: center">
                <div>
                  <img src="./static/images/logo.png" style="height: 100px" />
                </div>
                <div>
                  <h2 style="padding-left: 4px">技术社区</h2>
                  <p style="padding-left: 4px">致力构建一个专业的IT技术交流社区</p>
                </div>
              </el-col>
              <el-col :xs="24" :lg="10" style="padding-top: 30px;">
                <div>
                  <el-link type="primary" style="padding-left: 50px">首页</el-link>
                  <el-link type="primary" style="padding-left: 70px">咨询</el-link>
                  <el-link type="primary" style="padding-left: 80px">课程</el-link>
                  <el-link type="primary" style="padding-left: 80px">商城</el-link>
                </div>
                <div>
                  <el-link type="primary" style="padding-left: 30px">关于我们</el-link>
                  <el-link type="primary" style="padding-left: 50px">使用手册</el-link>
                  <el-link type="primary" style="padding-left: 50px">隐私条款</el-link>
                  <el-link type="primary" style="padding-left: 50px">建议反馈</el-link>
                </div>
              </el-col>
              <el-col :xs="24" :lg="6">
                <div>
                  <h2>联系我们</h2>
                  <p>电话：123895789</p>
                  <p>邮箱：wyj@qq.com</p>
                </div>
              </el-col>
              <el-col :xs="24" :lg="24" style="background-color: deepskyblue;">
                  <p style="text-align: center;">软件开发工作室版权所有</p>
              </el-col>
            </el-row>
          </el-footer>
        </el-container>
      </div>
    </body>
    <script>
      var App = {
        data() {
          return {
            msg: "hello world",
            activeIndex: 1,
            productList: [
                    { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '../static/images/product01.png' },
                    { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '../static/images/product02.png' },
                    { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '../static/images/product03.png' },
                    { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '../static/images/product04.png' },
                    { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '../static/images/product05.png' },
                    { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '../static/images/product06.png' },
                    { type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: '../static/images/product03.png' },
                    { type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: '../static/images/product02.png' },],
            cartItems: [],    
            isLoggendIn: false,
          };
        },
        computed: {
          totalPrice() {
            return this.cartItems.reduce((total, item) => {
              return total + (item.product.price * item.quantity);
            }, 0);
          }
        },
        methods: {
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
          },
          addToCart(product) {
            const existingItem = this.cartItems.find(item => item.product === product);
            if (existingItem) {
              existingItem.quantity++;
            } else {
              this.cartItems.push({
                product: product,
                quantity: 1
              });
            }
          },
          updateQuantity(item) {
          },
          removeItem(item) {
            const index = this.cartItems.indexOf(item);
            if (index !== -1) {
              this.cartItems.splice(index, 1);
            }
          }
        },
      };
      
    
      Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
  </html>